import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import ListItem from '../../components/listItem';

// 列表类型
export interface ListRawState {
  "id": string,
  "price": number,
  "title": string,
  "desc": string,
  "image": string[],
  "sell": number,
}



const Index: React.FC = () => {
  // 数据容器
  const [list, setList] = useState<ListRawState[]>([]);
  const navigate = useNavigate()

  // 请求函数
  const fetchList = async () => {
    const resp = await axios.get('/api/list');
    setList(resp.data.data)
  }

  // 跳详情
  const toDetail = (v: ListRawState) => {
    navigate('/detail/' + v.id)
  }

  //副作用
  useEffect(() => {
    fetchList()
  }, [])
  return (
    <div>
      <div className="list">
        {
          list.map((v, i) => {
            return <ListItem key={i} v={v} onClick={() => toDetail(v)}></ListItem>
          })
        }
      </div>
    </div>
  )
}
export default Index